<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        .anchorBL {
            display: none;
        }
    </style>
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">隧道设置</div>
                <div class="layui-card-body">
                    <div style="margin-bottom: 10px;">
                        <div class="layui-input-item" style="float:left;padding-right:10px;">
                            <form class="layui-form">
                                <div class="layui-inline">
                                    <input id="search-name" type="text" placeholder="请输入隧道名称"
                                           class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <a id="btn-search" class="layui-btn">查找</a>
                                    <a id="btn-tunnel-map" class="layui-btn layui-btn-primary">隧道分布</a>
                                </div>
                            </form>
                        </div>
                        <div style="float:right;">
                            <a id="btn-add" class="layui-btn">添加</a>
                            <a id="btn-batch-delete" class="layui-btn layui-btn-danger">删除</a>
                            <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <table class="layui-hide" id="tunnel-table" lay-filter="tunnel-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="tunnel-form">
    <div class="layui-card">
        <div class="layui-card-header">隧道详情</div>
        <div class="layui-card-body">
            <blockquote class="layui-elem-quote">输入地址关键词并按上下键可选择相关地址，按回车确认地址</blockquote>
            <form class="layui-form" action="#" lay-filter="tunnel-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">*隧道名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*隧道地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" id="address" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">经度</label>
                    <div class="layui-input-block">
                        <input type="number" name="lng" id="lng" value="120.324427" step="0.000001" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">纬度</label>
                    <div class="layui-input-block">
                        <input type="number" name="lat" id="lat" value="31.534712" step="0.000001" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">通车日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="openDate" id="openDate" placeholder="yyyy-MM-dd" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单洞里程</label>
                    <div class="layui-input-block">
                        <input type="number" name="distance" id="distance" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">面积</label>
                    <div class="layui-input-block">
                        <input type="number" name="area" id="area" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">隧道长度</label>
                    <div class="layui-input-block">
                        <input type="number" name="length" id="length" class="layui-input">
                    </div>
                </div>
                <div id="map" style="height:300px;width:100%;margin-bottom:20px;"></div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定</button>
                </div>
            </form>
        </div>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=0Ad9b6990afa90551082b9d343405152"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var popupIndex;

        table.render({
            elem: '#tunnel-table',
            url: 'tunnels',
            title: '',
            skin: 'line',
            cols: [[
                {type: 'checkbox'},
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'name', title: '隧道名称'},
                {field: 'address', title: '隧道地址'},
                {field: 'lng', title: '经度'},
                {field: 'lat', title: '纬度'},
                {field: 'openDate', title: '通车日期'},
                {field: 'distance', title: '单洞里程'},
                {field: 'length', title: '隧道长度'},
                {field: 'area', title: '面积'},
                {field: 'runtime', title: '运行时间(天)'},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation'}
            ]],
            page: true
        });

        function showTunnelForm() {
            popupIndex = admin.popupRight({
                area: '360px',
                success: function () {
                    var formHtml = $('#tunnel-form').html();
                    $('#' + this.id).html(formHtml);
                    laydate.render({
                        elem: '#openDate',
                        type: 'date'
                    });
                    form.render();
                    initMap();
                }
            });
            return popupIndex;
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        function search() {
            table.reload('tunnel-table', {
                where: {
                    name: $('#search-name').val(),
                },
                page: {
                    curr: 1
                }
            });
        }

        function initMap() {
            map = new BMap.Map("map");
            var center = new BMap.Point(120.305455901, 31.5700374519);
            map.centerAndZoom(center, 18);// 初始化地图,设置城市和地图级别。
            map.enableScrollWheelZoom(true);
            overlay = new BMap.Marker(center);
            map.addOverlay(overlay);//添加标注
            //建立一个自动完成的对象
            var ac = new BMap.Autocomplete(
                {
                    "input": "address",
                    "location": map
                });
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                var searchValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                layui.local.search(searchValue);
            });

            map.addEventListener("dragging", function showInfo() {
                var point = map.getCenter();
                if (overlay) {
                    overlay.setPosition(point);
                }
                $('#lng').val(point.lng);
                $('#lat').val(point.lat);
            });

            layui.local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: function () {
                    var point = layui.local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(point, 18);
                    if (overlay) {
                        overlay.setPosition(point);
                    }
                    $('#lng').val(point.lng);
                    $('#lat').val(point.lat);
                }
            });
        }

        $(document).on('keypress', function (e) {
            if (e.which == 13) {
                search();
            }
        });

        $("#btn-search").on('click', function () {
            search();
        });

        $("#btn-batch-delete").on('click', function () {
            layer.confirm('确定要删除吗?', {icon: 3, title: '提示'}, function (index) {
                var ids = [];
                var data = table.checkStatus('tunnel-table').data;
                for (let i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url: 'tunnels/' + ids.toString(),
                    type: 'DELETE',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            table.reload('tunnel-table');
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        });

        $("#btn-add").on('click', function () {
            popupIndex = showTunnelForm();
        });

        $("#btn-refresh").on('click', function () {
            table.reload('tunnel-table');
            layer.msg('表格已刷新');
        });

        $("#btn-tunnel-map").on('click', function () {
            layer.open({
                title: '隧道分布',
                type: 2,
                content: 'tunnel-map.html',
                area: ['960px', '680px'],
                maxmin: true
            });
        });

        table.on('tool(tunnel-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: 'tunnels/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('tunnel-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                showTunnelForm();
                form.val('tunnel-form', data);
            }
        });

        form.on('submit(form-submit)', function (data) {
            $.ajax({
                url: 'tunnels',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('操作成功');
                        table.reload('tunnel-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

    });
</script>
</body>

</html>